<template>
<div>
    <blur :blur-amount=30 v-for="(item, index) in list" :url="item.src" :key="index">
        <p class="center">
            <img class="previewer-demo-img" width="100" :src="item.src" @click="show(index)">
        </p>
    </blur>
    <!-- <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="100" @click="show(index)" /> -->
    <div v-transfer-dom>
        <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
    <group>
        <!-- <cell title="" value=""></cell> -->
        <cell-form-preview :list="info"></cell-form-preview>
    </group>

    <div class="reserve-btn">
        <x-button @click.native="handleClick"  type="primary" action-type="button" :show-loading="isLoading">预约</x-button>
    </div>
</div>
</template>

<script>
import { Blur, Previewer, TransferDom, CellFormPreview, Group, Cell, XButton  } from 'vux'

export default {
  components: {
    Blur,
    Previewer,
    CellFormPreview,
    Group,
    Cell,
    XButton
  },
  directives: {
    TransferDom
  },
  created () {
    this.$store.dispatch('getCoachDetail', this.$route.params.id).then(res => {
        this.list.push(res.list)
        this.info = res.info
    }).catch(err => {
        console.log(err)
    })
  },
  methods: {
    logIndexChange (arg) {
    //   alert(arg)
    },
    show (index) {
        this.$refs.previewer.show(index)
    },
    handleClick () {
        alert('预约成功')
    }
  },
  data () {
    return {
        isLoading: false,
        list: [],
        info: [],
        // list: [{
        //     msrc: require('@/assets/avatar.png'),
        //     src: require('@/assets/avatar.png'),
        //     w: 800,
        //     h: 400
        // }
        // ],
        // info: [{
        //     label: '姓名',
        //     value: '哎呦喂'
        // }, {
        //     label: '年龄',
        //     value: '100'
        // }, {
        //     label: '身份证',
        //     value: '36221454567165123**'
        // }, {
        //     label: '代码',
        //     value: '007'
        // }],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.center {
  text-align: center;
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.center img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #ececec;
}

.reserve-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;

    /deep/ button.weui-btn {
       
    }
}
</style>